<div id="content-container" class="content-container sortable">
    {$pagehtml}
</div>

<div class="editor-container">
    <!--包含类 editable -->
    <p id="editor-title">这是编辑版面,当前选择：<span id="selected-card"></span></p>
    <br>
    <div class="editor-item e-base">
        <span id="editor-select-card">选择上级组件模块</span>
        <span id="editor-clone">复制</span>
        <span id="editor-del">删除</span><br><br>
        <span id="editor-move-up">模块上移</span>
        <span id="editor-move-down">模块下移</span>
    </div>
    <div class="editor-item e-w">
        <span>宽度%: </span>
        <div id="editor-width-percent"></div>
        <br>
        <span>宽度px: </span>
        <input id="editor-width" type="text"><br>
        <span>注意：根据最后设置来决定，宽度使用百分比值还是绝对值</span>
    </div>
    <div class="editor-item e-h">
        <span>高度px</span>
        <input class="editor-input" id="editor-height" type="text">
    </div>
    <div class="editor-item e-h-center">
        <label for="editor-h-center">水平居中</label>
        <input type="checkbox" id="editor-h-center">
    </div>
    <div class="editor-item e-pos">
        <span>左边%</span>
        <div id="editor-left"></div>
    </div>
    <div class="editor-item e-grid">
        <span>行数</span>
        <input type="text" id="editor-grid-row">
        <br><br>
        <span>列数</span>
        <input type="text" id="editor-grid-col">
    </div>
    <div class="editor-item e-list">
        <span>行数</span>
        <input type="text" id="editor-list-row">
    </div>
    <div class="editor-item e-img">
        <!--包含类 bgImg -->
        <label class="">图片上传</label>
        <input type="file" class="file" id="editor-img">
        <img style="width:50px;" src=""/>请选择图片</label>
    </div>
    <div class="editor-item e-bg">
        <span>背景颜色</span>
        <input type="color" id="editor-bg-color">
        <br><br>
        <label for="editor-bg-visible">背景是否显示</label>
        <input type="checkbox" id="editor-bg-visible">
        <br><br>
        <label class="">背景图片上传</label>
        <input type="file" class="file" id="editor-bg-img">
        <img style="width:50px;" src=""/>请选择图片</label>
    </div>
    <div class="editor-item e-link">
        <!--组件需要类 e-link-->
        <span>跳转链接</span>
        <input type="text" id="editor-link">
    </div>
    <div class="editor-item e-text">
        <!--组件需要类 e-link-->
        <span>文本编辑</span>
        <textarea type="text" id="editor-text"></textarea>
        <br><br>
        <span>行高</span>
        <input type="text" id="editor-line-height">
        <br><br>
        <span>字体大小</span>
        <input type="text" id="editor-font-size">
        <br><br>
        <span>字体颜色</span>
        <input type="color" id="editor-font-color">
    </div>
    <div class="editor-item e-margin">
        <span>外边距</span><br><br>
        <span> 上: </span><input type="text" id="editor-mt">
        <span> 右: </span><input type="text" id="editor-mr">
        <br><br>
        <span> 下: </span><input type="text" id="editor-mb">
        <span> 左: </span><input type="text" id="editor-ml">
    </div>

    <div class="editor-item e-padding">
        <span>内边距</span><br><br>
        <span> 上: </span><input type="text" id="editor-pt">
        <span> 右: </span><input type="text" id="editor-pr">
        <br><br>
        <span> 下: </span><input type="text" id="editor-pb">
        <span> 左: </span><input type="text" id="editor-pl">
    </div>
    <div class="editor-item e-border">
        <span>边框-风格:</span>
        <select id="editor-border-style">
            <option data-border-style="none">无</option>
            <option data-border-style="solid" selected="selected">实线</option>
            <option data-border-style="dashed">虚线</option>
        </select>
        <br><br>
        <span>边框-颜色:</span>
        <input type="color" id="editor-bc">
        <br><br>
        <span>边框-大小:</span>
        <input type="text" id="editor-bw">
        <br><br>
        <span>圆角度数:</span>
        <input type="text" id="editor-border-r">
        <br><br>
        <!--choice border up right bottom left-->
        <label for="editor-enable-bt">上边框</label>
        <input type="checkbox" id="editor-enable-bt">
        <label for="editor-enable-br">右边框</label><br><br>
        <input type="checkbox" id="editor-enable-br">
        <label for="editor-enable-bb">下边框</label>
        <input type="checkbox" id="editor-enable-bb">
        <label for="editor-enable-bl">左边框</label>
        <input type="checkbox" id="editor-enable-bl">
    </div>
    <div class="editor-item e-theme">
        <!--<span>页脚</span>-->
        <!--<textarea type="text" id="editor-theme-footer"></textarea>-->
        <!--<br><br>-->
        <label class="">主题背景</label>
        <input type="file" class="file" id="editor-theme-bg">
        <img style="width:50px;" src=""/>请选择图片</label>
        <br><br>
        <label for="editor-theme-bg-visible">主题背景是否显示</label>
        <input type="checkbox" id="editor-theme-bg-visible">
    </div>
    <div class="editor-item e-richtext">
        <span>行高</span>
        <input type="text" id="editor-line-height2">
        <br><br>
        <label class="">富文本</label>
        <div id="editor-richtext"></div>
    </div>
    <div class="editor-item e-slider">
        <span>轮播项:</span><br><br>
        <button id="editor-prev-slider-item" class="ui-button ui-widget ui-corner-all">上一页</button>
        <button id="editor-next-slider-item" class="ui-button ui-widget ui-corner-all">下一页</button>
        <br><br>
        <button id="editor-add-slider-item-prepend" class="ui-button ui-widget ui-corner-all">向前追加一页</button>
        <button id="editor-add-slider-item-append" class="ui-button ui-widget ui-corner-all">向后追加一页</button>
        <button id="editor-remove-slider-item" class="ui-button ui-widget ui-corner-all">删除当前页</button>
        <br><br>
        <div class="editor-slider-content">
            <span>跳转链接</span>
            <input type="text" id="editor-slider-content-link">
            <br><br>
            <label class="">当前页图片</label>
            <input type="file" class="file" id="editor-slider-content-img">
            <img style="width:50px;" src=""/></label>
        </div>
        <br>
        <label>左导向按钮背景</label>
        <input type="file" class="file" id="editor-slider-prev-bg">
        <img style="width:50px;" src=""/>
        <br><br>
        <label>右导向按钮背景</label>
        <input type="file" class="file" id="editor-slider-next-bg">
        <img style="width:50px;" src=""/>
    </div>
</div>

<div id="move" style="cursor:move;display:none;height:8px;position: fixed;right:210px;top: 32%;"><i class="fa fa-arrows"></i></div>
<div id="widgets">
    <button class="btn btn-info" type="button" data-toggle="modal" href="#myModal" id="getTemplate">导入模板</button>
    <button class="btn btn-info" type="button" data-toggle="modal" href="#myModal-1">导出模板</button>
    <button class="btn btn-info" type="button" data-toggle="modal" href="#myModal-2">保存</button>
    <button class="btn btn-info" type="button" id="container">容器</button>
    <button class="btn btn-info" type="button" id="grid">网格</button>
    <button class="btn btn-info" type="button" id="list">列表</button>
    <button class="btn btn-info" type="button" id="banner">横幅</button>
    <button class="btn btn-info" type="button" id="title">标题</button>
    <button class="btn btn-info" type="button" id="paragraph">富文本</button>
    <button class="btn btn-info" type="button" id="slider">轮播图</button>
    <button class="btn btn-info" type="button" id="item-style1">图文项风格一</button>
</div>

<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">导入模板</h4>
            </div>
            <div class="modal-body">
                <table class="table  table-hover general-table">
                    <thead>
                    <tr>
                        <th style="text-align: center;width:70%">模板名称</th>
                        <th style="text-align: center;width:30%">操作 </th>
                    </tr>
                    </thead>
                    <tbody id="template">

                    </tbody>
                </table>

            </div>

        </div>
    </div>
</div>

<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal-1" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">导出模板</h4>
            </div>
            <div class="modal-body">
                <div class="form-inline" role="form">
                    <div class="form-group" style="width:100%">
                        <label class="col-lg-4 col-sm-2 control-label"> 模板名称</label>
                        <div class="col-lg-8">
                            <input class="form-control" id="template_title" value="">
                        </div>
                    </div>
                    <button type="submit" id="export-template" class="btn btn-primary">提交</button>
                </div>

            </div>

        </div>
    </div>
</div>

<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal-2" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">页面标题</h4>
            </div>
            <div class="modal-body">
                <div class="form-inline" role="form">
                    <div class="form-group" style="width:100%">
                        <label class="col-lg-4 col-sm-2 control-label"> 页面标题</label>
                        <div class="col-lg-8">
                            <input class="form-control" id="page_title" value="{$editor['title']}">
                        </div>
                    </div>
                    <button type="submit" id="save" class="btn btn-primary">保存</button>
                </div>

            </div>

        </div>
    </div>
</div>